<script setup>
import {ref, watch} from "vue";
import {cloneDeep} from "lodash";
import mapjson from "../../../../../public/mapjson/map.json";
import {getInsureComponyList} from "@/api/insure/longTerm";

const selectProps = {
    multiple: true,
    checkStrictly: true,
}
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
})
const obj = ref({
    insurCompany: '',
    companyArea: {
        areas: [],
        msg: '',
        needMatches: '',
        remark: '',
        solveMsg: '',
    },
    serveCompanyArea: {
        areas: [],
        msg: '',
        needMatches: '',
        remark: '',
        solveMsg: '',
    }
})
const emits = defineEmits(['success', 'update:show'])
const dialogVisible = ref(false);
const insureCompanyList = ref([]);
const submit = () => {
    if (!obj.value.insurCompany) {
        ElMessage.error('请选择保司')
        return;
    }
    if (obj.value.companyArea.areas.length === 0 && obj.value.serveCompanyArea.areas.length === 0) {
        ElMessage.error('请选择禁保区域')
        return;
    }
    if (obj.value.companyArea.areas.length !== 0 && obj.value.companyArea.needMatches === '') {
        ElMessage.error('请选择是否匹配')
        return;
    }
    if (obj.value.companyArea.areas.length !== 0 && !obj.value.companyArea.msg) {
        ElMessage.error('请输入消息')
        return;
    }
    if (obj.value.serveCompanyArea.areas.length !== 0 && obj.value.serveCompanyArea.needMatches === '') {
        ElMessage.error('请选择是否匹配')
        return;
    }
    if (obj.value.serveCompanyArea.areas.length !== 0 && !obj.value.serveCompanyArea.msg) {
        ElMessage.error('请输入消息')
        return;
    }
    emits('success', obj.value)
    emits('update:show', false)
    dialogVisible.value = false
}
const init = () => {
    obj.value = {
        insurCompany: '',
        companyArea: {
            areas: [],
            msg: '',
            needMatches: '',
            remark: '',
            solveMsg: '',
        },
        serveCompanyArea: {
            areas: [],
            msg: '',
            needMatches: '',
            remark: '',
            solveMsg: '',
        }
    }
}
watch(() => props.show, async (newval) => {
    dialogVisible.value = newval
    if (newval) {
        await getInsureComponyList().then(res => {
            insureCompanyList.value = res
        })
    }
})

watch(dialogVisible, (newval) => {
    init()
    emits('update:show', newval)
})
</script>

<template>
    <el-dialog v-model="dialogVisible" title="新增禁保区域" width="820px" :destroy-on-close="true">
        <div class="w-full box-border flex items-center justify-center p-16px">
            <div class="w-120px text-end flex-shrink-0">保司：</div>
            <el-select placeholder="请选择"
                       v-model="obj.insurCompany">
                <el-option v-for="(item,i) in insureCompanyList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictValue"/>
            </el-select>
        </div>
        <div class="w-full box-border flex gap-8px p-16px">
            <div class="flex-1 flex flex-column gap-8">
                <div class="text-center font-bold text-24px">公司禁保区域</div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">地区：</div>
                    <el-cascader
                        class="!w-full"
                        placeholder="请选择地区"
                        size="default"
                        :options="mapjson"
                        :props="selectProps"
                        collapse-tags
                        collapse-tags-tooltip
                        :max-collapse-tags="1"
                        clearable
                        v-model="obj.companyArea.areas"
                    >
                    </el-cascader>
                </div>
                <div class="flex gap-8px w-full items-center"
                     v-if="obj.companyArea.areas?.length!==0">
                    <div class="w-120px text-end flex-shrink-0">已选区域：</div>
                    <div class="flex-1">
                        <ul class="infinite-list" style="overflow: auto">
                            <li v-for="(item,i) in obj.companyArea.areas"
                                :key="i"
                                class="infinite-list-item">
                                {{ item.join('-') }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">是否匹配：</div>
                    <el-select placeholder="请选择"
                               v-model="obj.companyArea.needMatches">
                        <el-option :key="false" label="否" :value="false"/>
                        <el-option :key="true" label="是" :value="true"/>
                    </el-select>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">备注：</div>
                    <el-input placeholder="请输入"
                              v-model="obj.companyArea.remark"/>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">消息：</div>
                    <el-input placeholder="请输入"
                              v-model="obj.companyArea.msg"/>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">处理信息：</div>
                    <el-input placeholder="请输入"
                              v-model="obj.companyArea.solveMsg"/>
                </div>
            </div>
            <div class="flex-1 flex flex-column gap-8">
                <div class="text-center font-bold text-24px">派遣单位区域</div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">地区：</div>
                    <el-cascader
                        class="!w-full"
                        placeholder="请选择地区"
                        size="default"
                        :options="mapjson"
                        :props="selectProps"
                        collapse-tags
                        collapse-tags-tooltip
                        :max-collapse-tags="1"
                        clearable
                        v-model="obj.serveCompanyArea.areas"
                    >
                    </el-cascader>
                </div>
                <div class="flex gap-8px w-full items-center"
                     v-if="obj.serveCompanyArea.areas?.length!==0">
                    <div class="w-120px text-end flex-shrink-0">已选区域：</div>
                    <div class="flex-1">
                        <ul class="infinite-list" style="overflow: auto">
                            <li v-for="(item,i) in obj.serveCompanyArea.areas"
                                :key="i"
                                class="infinite-list-item">
                                {{ item.join('-') }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">是否匹配：</div>
                    <el-select placeholder="请选择"
                               v-model="obj.serveCompanyArea.needMatches">
                        <el-option :key="false" label="否" :value="false"/>
                        <el-option :key="true" label="是" :value="true"/>
                    </el-select>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">备注：</div>
                    <el-input placeholder="请输入"
                              v-model="obj.serveCompanyArea.remark"/>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">消息：</div>
                    <el-input placeholder="请输入"
                              v-model="obj.serveCompanyArea.msg"/>
                </div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">处理信息：</div>
                    <el-input placeholder="请输入"
                              v-model="obj.serveCompanyArea.solveMsg"/>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">

.infinite-list {
    min-height: 10px;
    height: 100px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}
</style>
